<template>
    <div id='gamecoin_detail'>
      <div class="container">
        <div class='commodity-title'>
          <p></p>
          <h3>商品信息</h3>
        </div>
        <div class="detail-table">
          <Row>
            <Col span="24" class="detail-table__col">门店名称：{{channelDeatil.shopName}}</Col>
          </Row>
          <Row>
            <!-- <Col :span="(goodsDetail.code === '01-0104-010402'|| goodsDetail.code === '01-0104-010401' || goodsDetail.code === '01-0104-010403') ? 12: 24" class="detail-table__col">分类名称：{{goodsDetail.parentCategoryName}} - {{goodsDetail.categoryName}}</Col> -->
            <Col span="12" class="detail-table__col">分类名称：{{goodsDetail.parentCategoryName}} - {{goodsDetail.categoryName}}</Col>
            <Col span="12" class="detail-table__col">是否是虚拟商品：{{goodsDetail.goodsType === 0 ? '否' : goodsDetail.goodsType === 1 ? '是': ''}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">所属类型：{{goodsDetail.relatedType}}</Col>
            <Col span="12" class="detail-table__col">对应分类：{{goodsDetail.classify}}</Col>
          </Row>
          <Row v-if="goodsDetail.code === '01-0104-010402' || goodsDetail.code === '01-0104-010401' || goodsDetail.code === '01-0104-010403'">
            <Col span="24" class="detail-table__col">套餐类型：{{goodsDetail.mealType}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">商品标题：{{channelDeatil.title}}</Col>
            <Col span="12" class="detail-table__col">商品名称：{{goodsDetail.skuName}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">商品条码：{{goodsDetail.barcode}}</Col>
            <Col span="12" class="detail-table__col">商品编码：{{goodsDetail.skuId}}</Col>
          </Row>
          <Row>
            <Col :span="(goodsDetail.code === '01-0102' || goodsDetail.code === '01-0104-010401') ? 12:24" class="detail-table__col">商品单位：{{goodsDetail.goodsUnit === 0 ? '个': goodsDetail.goodsUnit === 1 ? '枚' : goodsDetail.goodsUnit === 2 ? '份':''}}</Col>
            <Col span="12" class="detail-table__col" v-if="goodsDetail.code === '01-0102'">商品数量：1</Col>
            <Col span="12" class="detail-table__col" v-if="goodsDetail.code === '01-0104-010401'">游戏币数量：{{goodsDetail.exchangePrice}}枚</Col>
          </Row>
          <Row v-if="this.goodsDetail.code === '01-0102'">
            <Col span="24" class="detail-table__col">兑换数量：{{goodsDetail.exchangePrice}}</Col>
            <!-- <Col span="12" class="detail-table__col">兑换金额：</Col> -->
          </Row>
          <Row>
            <Col span="24" class="detail-table__col">
              <table>
                <tr>
                  <td width="60" valign="top">商品图片：</td>
                  <td class="detail-table-multimedia">
                    <div>
                      <img :src="channelDeatil.thumbnail ? channelDeatil.thumbnail: ''" alt="" style="width: 96px;height: 96px;margin-right:20px">
                    </div>
                  </td>
                </tr>
              </table>
            </Col>
          </Row>
        </div>
      </div>
      <div class="container" v-if="goodsDetail.code === '01-0104-010402' || goodsDetail.code === '01-0104-010403'">
        <div class='commodity-title' style="margin-bottom: 0">
          <p></p>
          <h3>商品详情</h3>
        </div>
        <div class="detail-table" style="margin-top: 40px" v-for="(item,idx) in goodsDetail.childMeal" :key="idx">
          <Row>
            <Col span="24" class="detail-table__col"><h3>子商品{{idx + 1}}</h3></Col>
          </Row>
          <Row>
            <Col :span="(goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277') ? 12:24" class="detail-table__col">商品名称：{{item.skuName}}</Col>
            <Col span="12" class="detail-table__col" v-if="goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277'">销售形式：{{item.goodsDetail.gameCouponExtra.saleType === 1 ? '单独销售': item.goodsDetail.gameCouponExtra.saleType === 0 ? '打包销售':''}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">所属类型：{{item.goodsDetail.goodsKindList[0].typeName}}</Col>
            <Col span="12" class="detail-table__col">对应分类：{{item.goodsDetail.goodsKindList[1].typeName}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">商品条码：{{item.barcode}}</Col>
            <Col span="12" class="detail-table__col">商品编码：{{item.subSkuId}}</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">商品数量：1</Col>
            <Col span="12" class="detail-table__col">商品单位：{{item.goodsUnit === 0 ? '个': item.goodsUnit === 1 ? '枚' : item.goodsUnit === 2 ? '份':''}}</Col>
          </Row>
          <Row>
            <Col :span="(goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277')?12:24" class="detail-table__col" v-if="goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277'">商品价：{{item.goodsDetail.gameCouponPriceConfig.configValue}}元</Col>
            <Col span="24" class="detail-table__col" v-if="item.barcode === 'YXB0000000277'">游戏币数量：{{item.num}}</Col>
            <Col span="12" class="detail-table__col" v-if="goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277'">局数：{{item.goodsDetail.gameCouponTimesConfig.configValue}}局</Col>
          </Row>
          <div v-if="goodsDetail.code === '01-0104-010403' && item.barcode !== 'YXB0000000277'">
            <Row>
              <Col span="24" class="detail-table__col">
                <table>
                  <tr>
                    <td width="60" valign="top">项目设置：</td>
                    <td class="detail-table-multimedia">
                      <span v-for="(ele, i) in JSON.parse(item.subChannelGameCoupons[0].params)" :key='i'>
                        <span>{{ele.machineName}}</span>
                        <span v-if="goodsDetail.childCode !== '02-0202'">{{ele.count}}局</span>
                        <span v-if="i !== JSON.parse(item.subChannelGameCoupons[0].params).length-1">、</span>
                      </span>
                    </td>
                  </tr>
                </table>
              </Col>
            </Row>
            <Row>
              <Col span="12" class="detail-table__col">有效期：{{item.subChannelGameCoupons[0].validType === 1 ? '指定时间':item.subChannelGameCoupons[0].validType === 2 ? '相对时间':''}}</Col>
              <Col span="12" class="detail-table__col" v-if="item.subChannelGameCoupons[0].validType === 2">时长：{{item.subChannelGameCoupons[0].validDays}}天</Col>
              <Col span="12" class="detail-table__col" v-if="item.subChannelGameCoupons[0].validType === 1">开始时间与结束时间：{{item.subChannelGameCoupons[0].validStart + "至" + item.subChannelGameCoupons[0].validEnd}}</Col>
            </Row>
            <Row v-if="goodsDetail.childCode === '02-0202'">
              <Col span="24" class="detail-table__col">每天使用局数限制：{{item.subChannelGameCoupons[0].dailyUseLimit}}局</Col>
            </Row>
          </div>
        </div>
      </div>
      <div class="container">
        <div class='commodity-title'>
          <p></p>
          <h3>价格信息</h3>
        </div>
        <div class="detail-table">
          <Row>
            <Col span="12" class="detail-table__col">
              销售渠道：{{channelDeatil.channelId === '1' ? '收银台': channelDeatil.channelId === '2' ? '一体机': channelDeatil.channelId === '4' ? '微信商城': channelDeatil.channelId === '8' ? '移动设备':''}}
            </Col>
            <Col span="12" class="detail-table__col">
              可售库存：{{channelDeatil.inventory === -1 ? '不限': channelDeatil.inventory}}
            </Col>
          </Row>
          <Row>
            <!-- <Col span="12" class="detail-table__col">商品价：{{goodsDetail.gameTicketPrice}}元</Col> -->
            <Col span="24" class="detail-table__col">平台价格：{{channelDeatil.standPrice}}元</Col>
          </Row>
          <Row>
            <Col span="12" class="detail-table__col">上架时间：{{channelDeatil.listingAt}}</Col>
            <Col span="12" class="detail-table__col">下架时间：{{channelDeatil.delistingAt}}</Col>
          </Row>
        </div>
      </div>
      <div class="container">
        <div class='commodity-title'>
          <p></p>
          <h3>售卖规则</h3>
        </div>
        <div class="detail-table">
          <Row>
            <Col span="24" class="detail-table__col">购买最少限制：{{channelDeatil.minNum}}</Col>
          </Row>
        </div>
      </div>
    </div>
  </template>

<script>
import { getChannelDetail } from '@/api/commondity/index'
export default {
  name: 'gamecoin_detail',
  data () {
    return {
      goodsDetail: {},
      channelDeatil: {}
    }
  },
  methods: {
    getDetail () {
      getChannelDetail({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.goodsDetail = result.data.goods
          this.channelDeatil = result.data.channelGoods
          this.goodsDetail.relatedType = this.goodsDetail.goodsKindList[0].typeName
          this.goodsDetail.classify = this.goodsDetail.goodsKindList[1].typeName
          this.goodsDetail.code = this.goodsDetail.goodsKindList.map(item => {
            return item.typeCode
          }).join('-')
          console.log(this.goodsDetail.code)
          if (this.goodsDetail.goodsKindList.length > 2) {
            this.goodsDetail.mealType = this.goodsDetail.goodsKindList[2].typeName
            if (this.goodsDetail.code === '01-0104-010402' || this.goodsDetail.code === '01-0104-010403') {
              this.goodsDetail.childMeal = this.goodsDetail.goodsCombo
              if (this.goodsDetail.code === '01-0104-010403') {
                this.goodsDetail.childCode = this.goodsDetail.goodsCombo[1].goodsDetail.goodsKind
                console.log('02-0202')
              }
            }
          }
          // 获取兑换数量 与 购币套餐中的游戏币数量
          if (this.goodsDetail.code === '01-0102' || this.goodsDetail.code === '01-0104-010401') {
            this.goodsDetail.exchangePrice = this.goodsDetail.goodsCombo[0].num
          }
          this.channelDeatil.standPrice = this.channelDeatil.goodsPrices[0].amount.toFixed(2)
          this.goodsDetail.gameTicketPrice = this.goodsDetail.gameCouponPriceConfig ? this.goodsDetail.gameCouponPriceConfig.configValue : ''
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

  <style lang="less">
  @import '~@/assets/stylus/detail-table.less';
  #gamecoin_detail{
    padding: 25px 100px;
    .container {
      margin-bottom: 70px;
      .commodity-title {
        display: flex;
        margin-bottom: 30px;
        p {
          width: 8px;
          height: 20px;
          margin-right: 10px;
          background-color: #2d8cf0;
        }
      }
    }
  }
  </style>
